<div class="container">
  <div class="disk-details-header">
    <span>{{ 'Disks Overview' | translate }}</span>
  </div>
  <div class="disk-overview">
    <div class="tile" [class.active]="selectedView() === EnclosureView.Pools">
      <div class="primary-number">{{ poolsInfo().length }}</div>
      <div class="title">{{ '{n, plural, one {Pool in Enclosure} other {Pools in Enclosure} }' | translate: { n: poolsInfo().length } }}</div>
      <div class="subtitle">
        @if (unhealthyPoolsInfo().length === 0) {
          {{ 'All pools are online.' | translate }}
        } @else if (unhealthyPoolsInfo().length === 1) {
          {{ 'Pool {name} is {status}.' | translate: {
            name: unhealthyPoolsInfo()[0].pool_name,
            status: unhealthyPoolsInfo()[0].disk_status,
          } }}
        } @else if (unhealthyPoolsInfo().length > 1) {
          {{ '{name} and {n, plural, one {# other pool} other {# other pools}} are not healthy.' | translate: {
              name: unhealthyPoolsInfo()[0].pool_name,
              n: unhealthyPoolsInfo().length - 1,
            } }}
        }
      </div>
      <button
        mat-button
        color="default"
        [ixTest]="['show', EnclosureView.Pools]"
        (click)="setCurrentView(EnclosureView.Pools)"
      >
        {{ 'Show Pools' | translate }}
      </button>
    </div>
    <div class="tile" [class.active]="selectedView() === EnclosureView.DiskStatus">
      <div class="primary-number">{{ failedDisks().length }}</div>
      <div class="title">{{ '{n, plural, one {Failed Disk} other {Failed Disks} }' | translate: { n: failedDisks().length } }}</div>
      <div class="subtitle">
        @if (failedDisks().length === 0) {
          {{ 'All disks healthy.' | translate }}
        } @else if (failedDisks().length === 1) {
          {{ 'Check {name}.' | translate: { name: failedDisks()[0].dev } }}
        } @else if (failedDisks().length > 1) {
          {{ 'Check {name} and {n, plural, one {# other disk} other {# other disks}}.' | translate: {
            name: failedDisks()[0].dev,
            n: failedDisks().length - 1,
          } }}
        }
      </div>
      <button
        mat-button
        color="default"
        [ixTest]="['show', EnclosureView.DiskStatus]"
        (click)="setCurrentView(EnclosureView.DiskStatus)"
      >
        {{ 'Show Status' | translate }}
      </button>
    </div>
    @if (expanders().length) {
      <div class="tile" [class.active]="selectedView() === EnclosureView.Expanders">
        <div class="primary-number">{{ expanders().length }}</div>
        <div class="title">{{ '{n, plural, one {SAS Expander} other {SAS Expanders} }' | translate: { n: expanders().length} }}</div>
        <div class="subtitle"> {{ 'on this enclosure.' | translate }} </div>
        <button
          mat-button
          color="default"
          [ixTest]="['show', EnclosureView.Expanders]"
          (click)="setCurrentView(EnclosureView.Expanders)"
        >
          {{ 'Show Expander Status' | translate }}
        </button>
      </div>
    }
  </div>
</div>
